<template>
  <view class="rateContainer">
    <uni-collapse>
      <uni-collapse-item :title="collapseTitle" :open="isOpen">
        <view class="rateItem" v-for="(item, index) in collData" :key="index">
          <view class="flex">
            <view class="rateItem-text"
              ><text>{{ index | serialNumber }}</text>
              <text>{{ item.name | isNull }}</text>
              <text class="normalColor">{{
                item.count ? item.count : "--"
              }}</text></view
            >
            <view>
              <text class="normalColor">{{ item.rateCount | isNull }}</text
              >%
            </view>
          </view>
          <view>
            <progress
              :percent="item.rateCount"
              activeColor="#13B38F"
              stroke-width="18"
              border-radius="4"
            />
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
  props: ["collapseTitle", "isOpen", "collData"],
  filters: {
    isNull: function (value) {
      return value !== null || value != undefined ? value : "--";
    },
    serialNumber(value) {
      let num = value + 1;
      if (num <= 9) {
        return "0" + num;
      }
      return num;
    }
  }
});
</script>

<style lang="scss" scoped>
.normalColor {
  color: $normalFontColor;
}
.rateContainer {
  margin-top: 21rpx;
  padding: 0rpx 29rpx;
  .rateItem {
    font-size: 25rpx;
    font-weight: 400;
    color: $lightFontColor;
    padding: 0 29rpx;
    padding-bottom: 29rpx;
    &-text {
      margin-bottom: 7rpx;
    }
    text {
      &:not(:last-of-type) {
        margin-right: 14rpx;
      }
    }
  }
}
</style>
